<template>
  <el-container>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm" size="small">

      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>
			<el-form-item label="描述" prop="title">
        <el-input
					type="textarea"
					:autosize="{ minRows: 2, maxRows: 4}"
					placeholder="请输入内容"
					v-model="ruleForm.desc">
				</el-input>
      </el-form-item>
      <el-form-item label="内容">
        <quill-editor
          v-model="ruleForm.content"
          ref="myQuillEditor"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)">
        </quill-editor>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
        <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
        <el-button @click="goBack()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  export default {
    mounted() {
      let _this = this;
      var attrs = this.$attrs;
      if (attrs.methodType == this.constant.EDITORMETHOD) {
        this.api.getClauseItem({
          id: attrs.id
        }).then(function (res) {
          if (res.code == 1) {
            _this.ruleForm = res.data;
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      }
    },
    methods: {
      goBack: function () {
        this.$router.go(-1)
      },
      onEditorBlur: function (quill) {
        console.log('editor blur!', quill)
      },
      onEditorFocus: function (quill) {
        console.log('editor focus!', quill)
      },
      onEditorReady: function (quill) {
        console.log('editor ready!', quill)
      },
      submitForm(formName) {
        let _this = this;
        var attrs = this.$attrs;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (attrs.methodType == this.constant.EDITORMETHOD) {
              _this.api.updateClauseItem(_this.ruleForm).then(function (res) {
                if (res.code == 1) {
                  _this.goBack();
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'success',
                  });
                } else {
                  _this.$message({
                    showClose: true,
                    message: res.msg,
                    type: 'warning'
                  });
                }
              }).catch(function (error) {
                throw new Error(error);
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    data() {
      return {
        ruleForm: {
          id: null,
          title: '',
          type: '2',
          content: ''
        },
        rules: {
          title: [
            {required: true, message: '请输入标题名称', trigger: 'blur'},
          ]
        }
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  .quill-editor {
    line-height: 24px !important;
  }

  .ql-formats::before {
    margin: 15px;
  }

  .ql-tooltip {
    left: 0 !important;
    top: 0 !important;
  }
</style>
